<template>
	<view class="demos">

		<view class="boxc">
			<view class="demo_top">
				<view class="demo">
					<view class="demo_top">
						<view class="demo_box">
							<view class="demo_top_left">
								<view class="imgbox">
									<view class="img" :style="{ backgroundImage: 'url(' + lists.image + ')' }"></view>
									<!-- <view class="wear" style="background-color: red;">
										<div class="text" style="color: green;">{{item.wears}}</div>
									</view> -->
								</view>
							</view>
							<view class="demo_top_right">
								<view class="title textss">{{lists.name}}</view>
								<view class="price">￥{{lists.price}}</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="demo_steam" @click="steames">
				<view class="demo_jgs_left">
					<span style="margin-left: 3vw;" class="textss">
						收货Steam
					</span>
				</view>
				<view class="demo_jgs_right">
					<view
						style="text-align: right; margin-right: 20rpx; line-height: 10vw; width: 45vw;height: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
						{{urls}}
					</view>
					<span style="font-size: 5vw;line-height: 10vw;"> > </span>
				</view>

			</view>
			<view class="demo_jg">
				<view class="demo_jg_left">
					<span style="margin-left: 3vw;" class="textss">
						价格
					</span>
				</view>
				<view class="demo_jg_right">
					￥{{lists.price}}
				</view>
			</view>
			<!-- <view class="demo_jg">
			<view class="demo_jg_left">
				<span style="margin-left: 3vw;">
					{{radiovalueCard}}
				</span>
			</view>
			<view class="demo_jg_right">
				更换服务
			</view>
		</view> -->
			<view class="demo_jg" @click="dianji">
				<view class="demo_jg_left">
					<span style="margin-left: 3vw;" class="textss">
						支付方式
					</span>
				</view>
				<view class="demo_jg_right">
					{{zfb}}
				</view>
			</view>
			<view class="demo_jg">
				<view class="demo_jg_left">
					<span style="margin-left: 3vw;" class="textss">
						用户昵称
					</span>
				</view>
				<view class="demo_jg_right">
					{{username}}
				</view>
			</view>
			<view class="demo_jg">
				<view class="demo_jg_left">
					<span style="margin-left: 3vw;" class="textss">
						手机号码
					</span>
				</view>
				<view class="demo_jg_right">
					{{tel}}
				</view>
			</view>
			<view class="ps">
				<p @click="jg_show">说明：</p>
				<p>1，本商品为虚拟商品，拍下后将自动发货到您提供的Steam链接。</p>
				<p>2，确保您的Steam账号信息真实有效。</p>
				<p>3，检查交易窗口中的物品是否正确。</p>
				<p>4，确保你的Steam账户安全，避免账户被盗。</p>
				<p>5，在第三方平台交易时要特别小心，确保平台的可靠性和安全性。</p>
				<p>6，遵守所有Steam及相关平台的使用条款和条件。</p>
				<p>7，在任何交易中都要保持警惕，避免诈骗。</p>
				<p>8，交易发送后，Steam会要求你通过手机Steam Guard确认交易。</p>
				<p>9，打开你的手机Steam应用，进入Steam Guard部分。</p>
				<p>10，找到并确认这笔交易，确保所有信息无误后确认。</p>
				<p>一旦买家接受交易并在他们的Steam账户中确认，交易即视为完成。
					你可以在Steam库存的“交易历史”中查看这笔交易的状态。</p>
			</view>
			<!-- 	<view class="" style="width: 100%; height: 20vw;background-color:#f4f5f7;">

			</view> -->
		</view>
		<u-popup :show="cardPopupShow" @close="cardPopupClose" @open="cardPopupOpen">
			<view class="cardPopup">
				<u-radio-group v-model="radiovalueCard"
					style="width: 90%; margin: auto; display: flex;flex-direction: column;">
					<u-radio labelColor="black" activeColor="#3FAC8C" v-for="(item, index) in radiolistCard"
						:key="index" :label="item.name" :name="item.name" @change="radioChange(index)"
						style="margin-top: 5vw;">
					</u-radio>
				</u-radio-group>
			</view>
		</u-popup>
		<view class="demo_btn">
			<u-button class="btns" :loading="payLoading" :disabled="payBtn" @click=" btns" type="primary"
				:text="payText"></u-button>
		</view>

		<view>
			<u-popup :show="show" @close="close" @open="open">
				<view class="popups">
					<h3 style="text-align: center;font-size: 5vw;">请选择支付方式</h3>
					<u-radio-group iconPlacement='right' size='30' v-model="radiovalue1" placement="column">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChanges(item.name)">
						</u-radio>
					</u-radio-group>
					<!-- <button class="btn_dw" @click="btns">立即支付</button> -->
				</view>
			</u-popup>

		</view>
	</view>
</template>

<script>
	// import wearProgressVue from "../../components/wear-progress.vue";
	export default {
		data() {
			return {
				//支付按钮
				payBtn: false,
				payText: "支付",
				payLoading: false,
				radiovalueCard: "",
				cardPopupShow: false,
				dataindex: 2,
				columns: [
					[],
				],
				datas: [],
				radiolistCard: [],
				value1: 1,
				value2: 2,
				order_jg: '',
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				shows: false,
				show: false,
				dataList: [{
					img: "https://market.fp.ps.netease.com/file/65f5765efb0ac8380700d6cd1r9cyG1o05",
					name: "沙漠之鹰 | 印花集合",
					wears: "久经沙场",
					price: 1000,
					wear: "0.06915038824081421",
					sum: 98,
					type: 1
				}],
				lists: [],
				radiolist1: [{
						name: '支付宝支付',
						disabled: false
					},
					{
						name: '余额支付',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '支付宝支付',
				zfb: '支付宝支付',
				urls: '',
				//钱包余额
				user_money: "",
				//用户名
				username: "",
				//电话
				tel: "",
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E",
				steamlinkId: ""
			}

		},
		onShow() {
			this.getSetting()
			this.getUserInfo()
			this.huoqus()
		},
		onLoad: function(options) {
			// console.log(JSON.parse(options.detailMsg), "123445s");
			this.lists = JSON.parse(options.detailMsg)
			// console.log(this.lists)
			this.getUser()

		},
		methods: {
			getUserInfo() {
				uni.request({
					url: "/api/system/userinfo",
					method: "POST",
					header: {
						'content-Type': 'application/json',
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					console.log(res.data.data);
					this.user_money = res.data.data.money
					this.username = res.data.data.nickname
					this.tel = res.data.data.mobile
				})
			},
			getSetting() {
				uni.request({
					url: "/api/index/getSetting",
					method: "POST"
				}).then(res => {
					document.documentElement.style.setProperty('--bg-color', res.data.data.theme_color);
					document.documentElement.style.setProperty('--text-color', res.data.data.font_color);
				})
			},
			dianji() {
				if (this.urls == []) {
					uni.showModal({
						title: '您未设置Steam账号链接',
						content: '确定要跳转到steam新增链接吗',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/steam/steam"
								})

							} else {
								console.log('弹框后点取消')
							}
						}
					})
				} else {
					this.show = true
				}


			},
			huoqus() {
				uni.request({
					url: "/api/user/user_steamlink",
					method: "POST",
					header: {
						'content-Type': 'application/json',
						token: uni.getStorageSync('token')
					},

				}).then(res => {
					// console.log("steam", res.data.data[0])
					this.steamlinkId = res.data.data[0].id
					if (res.data.data == []) {

					} else {
						this.urls = res.data.data[0].link_url
					}

				})
			},
			steames() {
				uni.navigateTo({
					url: "/pages/steam/steam"
				})
			},
			tijiao() {

				let data = {
					steam_link: this.inps,
					default_switch: 1
				}
				uni.request({
					url: "/api/user/addLink",
					method: "POST",
					header: {
						'content-Type': 'application/json',
						token: uni.getStorageSync('token')
					},
					data: data
				}).then(res => {
					console.log(res)
				})
			},
			getUser() {
				uni.request({
					url: "/api/index/provider",
					method: "POST",

				}).then(res => {
					this.radiolistCard = res.data.data
					this.radiovalueCard = this.radiolistCard[3].name
				})

			},
			radioChanges(index) {
				console.log(index)
				this.zfb = index
			},
			btns() {
				if (this.urls == "") {
					uni.showToast({
						title: "未绑定steam链接",
						icon: "none",
						duration: 1500
					})
					return
				}
				if (this.zfb == "余额支付") {
					this.payText = "支付中"
					this.payBtn = true
					this.payLoading = true
					let data = {
						from: 1,
						jewerly_id: this.lists.id,
						steamlink_id: this.steamlinkId,
						user_id: 1,
						provider_id: this.dataindex,
						pay_type: "balance"
					}
					console.log(data);
					uni.request({
						url: "/api/jewerly/submit",
						method: "POST",
						header: {
							// //返回数据类型
							//   "content-type":" application/json; charset=utf-8",
							token: uni.getStorageSync("token")
						},
						data: data
					}).then(res => {
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 1000
							})
							this.payText = "支付"
							this.payBtn = false
							this.payLoading = false
							return
						}
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: "none"
							})
							this.payText = "支付"
							this.payBtn = false
							this.payLoading = false
						}

						// this.order_jg = res.data.data.order_id
						// this.orders(this.order_jg)
					})
				}
				if (this.zfb == '支付宝支付') {
					this.payText = "支付中"
					this.payBtn = true
					this.payLoading = true
					let data = {
						from: 1,
						jewerly_id: this.lists.id,
						steamlink_id: this.steamlinkId,
						user_id: 1,
						provider_id: this.dataindex,
						pay_type: "alipay"
					}
					console.log(data);
					uni.request({
						url: "/api/jewerly/submit",
						method: "POST",
						header: {
							// //返回数据类型
							//   "content-type":" application/json; charset=utf-8",
							token: uni.getStorageSync("token")
						},
						data: data
					}).then(res => {
						// uni.showToast({
						// 	title: res.data.msg,
						// 	icon: "none",
						// 	duration: 1000
						// })
						this.order_jg = res.data.data.order_id
						this.orders(this.order_jg)
					})
				}
			},
			orders(id) {
				uni.request({
					url: "/api/system/pay",
					method: "POST",
					data: {
						id: this.order_jg,
						domain: `${window.location.protocol}//${window.location.host}`
					}
				}).then(res => {
					this.payText = "支付"
					this.payBtn = false
					this.payLoading = false
					if (this.zfb == '支付宝支付' && res.data.data.url) {
						window.location.href = res.data.data.url
					}
				})
			},
			radioChange(index) {
				this.radiovalueCard = this.radiolistCard[index]
				this.dataindex = this.radiolistCard[index].id
				this.cardPopupShow = false
			},
			cardPopupOpen() {
				console.log('open');
			},
			cardPopupClose() {
				this.cardPopupShow = false
			},
			jg_show() {
				this.cardPopupShow = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style scoped lang="scss">
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.demos {
		width: 100vw;
		height: 100vh;
		background-color: var(--bg-color);
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.textss {
		color: var(--text-color);
	}

	.boxc {
		width: 100%;
		height: auto;
	}

	.steams {
		width: 80vw;
		height: 30vh;
	}

	.cardPopup {
		width: 100%;
		height: 40vh;
	}

	.ps {
		width: 90%;
		height: auto;
		margin: auto;
		font-size: 3vw;
		color: var(--text-color);
		line-height: 5vw;
		margin-top: 5vw;
	}

	.change-card {
		width: 90%;
		height: 10vw;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;



		.arrow {
			width: 5vw;
			height: 5vw;
			/* background-image: url("../../../static/my/right-arrow.png"); */
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}
	}

	.demo_top {
		width: 100%;
		height: 30vw;
		background-color: var(--bg-color);
	}

	.demo_steam {
		width: 95%;
		height: 10vw;
		background-color: var(--bg-color);
		margin: auto;
		margin-top: 15vw;
		display: flex;
	}

	.demo_jg {
		width: 95%;
		height: 10vw;
		margin: auto;
		margin-top: 5vw;
		background-color: var(--bg-color);
		display: flex;
	}

	.demo_jgs_left {
		width: 50%;
		height: 100%;
		line-height: 9vw;
		font-size: 4vw;
	}

	.demo_jgs_right {
		width: 50%;
		height: 100%;
		line-height: 9vw;
		font-size: 4vw;
		color: var(--text-color);
		display: flex;
		justify-content: space-between;
	}

	.demo_jg_left {
		width: 30%;
		height: 100%;
		line-height: 9vw;
		font-size: 4vw;
	}

	.demo_jg_right {
		width: 80%;
		height: 100%;
		line-height: 9vw;
		font-size: 4vw;
		text-align: right;
		color: var(--text-color);
	}

	.demo_btn {
		width: 100%;
		height: 12vw;
		background-color: #fff;
		position: fixed;
		bottom: 0;
	}

	.btns {
		font-size: 5vw;
		background-color: black;
		color: #ffffff;
	}

	.popups {
		width: 100%;
		height: 60vw;
	}

	.btn_dw {
		position: absolute;
		width: 100%;
		background-color: #06a42f;
		color: var(--text-color);
		font-size: 5vw;
		border-radius: 8vw;
		bottom: 0;
	}

	.demo {
		width: 100%;
		height: 30vw;
		background-color: var(--bg-color);
		/* overflow: hidden; */
		display: flex;
		flex-wrap: wrap;
	}

	.demo_top {
		width: 100%;
		height: 25vw;

	}

	.demo_box {
		width: 90%;
		height: 100%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.demo_top_left {
		width: 35%;
		height: 25vw;

	}

	.demo_top_right {
		width: 60%;
		height: 100%;

		.title {
			width: 100%;
			height: 20vw;
			font-size: 4vw;
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
			font-weight: bold;
			margin-top: 1vw;
		}

		.price {
			font-size: 4.5vw;
			color: #eee20e;
			font-weight: bold;
			// margin-top: 10vw;
		}
	}

	.imgbox {
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to top, #999999, #ccc);
		position: relative;
		margin-top: 2vw;

		.img {
			width: 100%;
			height: 25vw;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}

		.wear {
			position: absolute;
			width: 15vw;
			height: 5vw;
			top: 0;
			left: 0;
			display: flex;
			justify-content: right;

			.text {
				width: 13vw;
				height: 5vw;
				background-color: var(--bg-color);
				font-size: 3vw;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
			}
		}

	}

	.wear {
		width: 100%;
		height: 10vw;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.wearNum {
			width: 100%;
			height: 50%;
			white-space: nowrap;
			font-size: 3.5vw;
		}
	}
</style>